<template>
  <a-modal title="单位管理" v-model:open="open" @ok="handleOk">
    <a-form :model="form" 
            :label-col="ModalFormLayout.labelCol" 
            :rules="rules" 
            ref="formRef" 
            :wrapper-col="ModalFormLayout.wrapperCol">
      <a-form-item label="单位名称" name="name">
        <a-input placeholder="请输入单位名称" v-model:value="form.name" show-count :maxlength="6"/>
      </a-form-item>
      <a-form-item label="计价方式" name="type">
        <a-select v-model:value="form.method" :style="width.sm" :options="UnitTypes"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { UnitTypes,ModalFormLayout,width } from '@/config';
import type { FormInstance } from 'ant-design-vue';
import { reactive,ref } from 'vue';

const open = defineModel<boolean>('open')
const formRef = ref<FormInstance>()
const form = reactive({
  name: '',
  method:'area'
})
const rules = {
  name: [
    { required: true, message: '请输入单位名称', trigger: 'blur' },
    { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选计价方式', trigger: 'change' }
  ]
}
const handleOk = () => {
  formRef.value?.validate().then(() => {
    console.log('submit!')
  })
}
</script>

<style scoped>

</style>